<!DOCTYPE html>
<html>
<head>
<title> Download Helper Options </title>
<style>
  body {
    margin:10px;
    font-size:13px;
    background: #EBEFF9;
    font-family: arial, sans-serif;
  }
  #header {
    padding-bottom:1em;
    padding-top:1em;
  }
  #header h1 {
    font-size: 30px;
    display:inline;
    color: #3d5d6a;
    padding-bottom:40px;
    padding-left:90px;
    padding-top:70px;
    background:url(images/icon_48.png) no-repeat 1px 62px;
  }
  a {
    color: #1C7EC5;
    text-decoration: underline;
    cursor: pointer;
  }
  #downloader {
    border-bottom: 3px dotted #CCDDED;
  }
  .downloaderOptionTitle {
    padding-left:0.5em;
    color: #333333;
    line-height: 28px;
    font-size:15px;
  }
  p {
    padding-left:2em;
    font-size:14px;
  }
  .section-header {
    background:#ebeff9;
    border-top:1px solid #b5c7de;
    font-size:99%;
    padding:3px 0 2px 5px;
    font-weight:bold;
    margin-bottom:1em;
    margin-top:1em;
  }
  .contentBox {
    background-color: #ffffff;
    border: 3px solid #bec9ce;
    -webkit-border-radius: 20px 20px;
    padding: 30px;
    text-align: left;
    margin: 50px auto 20px auto;
    width: 657px;
  }
  #contextMenuItem {
    margin-left: 32px;
  }
  #footer {
    text-align: center;
    font-size: 13px;
  }
  table {
     border-collapse: collapse;
     width: 657px;
  }
  .downloaderItem {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
        from(#FEFEFE), to(#eff8fa));
    height: 27px;
    border-top: 1px solid #C1D1E0;
  }
  .downloaderItem th {
    font-size: 12px;
    color : #1a82c4;
    height: 27px;
    border-right: 1px solid #D0D0D0;
    color: #5e769c;
  }
  .th0 {
    width: 80px;
    height: 27px;
  }
  .th1 {
    width: 149px;
    height: 27px;
  }
  .th0 div{
    float: left;
    padding-left: 29px;
  }
  .th1  div {
    float: left;
    padding-left: 17px;
  }
  .th2 {
    width: 337px;
    height: 27px;
  }
  .th2 div {
    float: left;
    padding-left: 17px;
  }
  .th3 {
    width: 76px;
    height: 27px;
    font-size: 12px;
  }
  .th3 .btnDiv {
    float: right;
    padding-right: 17px;
  }
  #downloaderSetting {
    font-weight: bolder;
  }
  .itemImg {
   float: left;
   padding-left: 18px;
   cursor: pointer;
   width: 30px;
   height: 30px;
  }
  .itemName {
    width: 123px;
    float: left;
    height: 22px;
    margin-left: 8px;
    padding-left: 10px;
  }
  .itemParameter {
    width: 309px;
    float: left;
    padding-left: 10px;
    height: 22px;
    margin-left: 8px;
  }
  button {
   cursor: pointer;
  }
  .downloaderItemContainer {}
  .downloaderItemContainer tr{
    height: 41px;
    border: 0;
  }
  input[type=text] {
    height: 22px;
    border: 1px solid #c1d1e0;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
        from(#FFFFFF), to(#edf5f5));
  }
  .addURL-Dialog {
    z-index: 1000;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,
        from(#d0e1f3), to(#f5f9fc));
    width: 285px;
    height: 155px;
    border: 1px solid #a2bad4;
    display: none;
    position: absolute;
    -webkit-border-radius: 5px;
    -webkit-box-shadow:  #CCC 0px 0px 7px 1px;
  }
  .addURL-Dialog .body {
    background-color: White;
    width: 265px;
    height: 100px;
    margin: 10px 10px;
  }
  .addURL-Dialog input {
    width: 230px;
    margin-top: 10px;
  }
  .addURL-Dialog .bottom {
    height: 50px;
    width: 285px;
    margin: auto;
  }
 .addURL-Dialog .bottom .btnDiv {
    float: right;
    padding-right: 10px;
  }
  #urlAddress {
    font-weight: bold;
    color: #6587a2;
  }
  #bottomLine {
    border-top: 1px solid #c1d1e0;
    display: none;
  }
  #downloaderSettingTitle {
     margin: 20px 0 0 0;
     display: none;
  }
  #downloaderOption {
    padding-left: 16px;
  }
  #downloaderOption span {
    padding-left: 5px;
  }
  #downloaderOption div {
    padding: 3px 0 2px ; 
  }
  #downloaderOPtion input {
   margin: 0 3px 3px 5px;
  }
  #linuxTitleLine {
    border-bottom: 3px dotted #CCDDED;
    margin-bottom: 0px;
    margin-top: 0px;
    display: none;
  }
  .tip_failed {
    color: #ffffff;
    background: #ff8080;
    height:22px;
    line-height:22px
  }
</style>
</head>
<body onload="init();">
<div class="contentBox">
  <div id="header">
    <h1><span id="pageTitle"></span></h1>
  </div>
  <h4 id="downloader" class="downloaderOptionTitle"></h4>
  <table><tr><td>
    <div id="downloaderOption"></div>
  </td><td> </td></tr>
  </table>
  <div  id="selectDefaultDownloaderPrompt" style="margin:16px 0;font-size: 12px; display:block;
     background-color: #f6fbff ;border:1px #ecf6fe solid;height: 69px;">
     <div style="padding: 14px 0 0 19px;">
      <span  id="selectDefaultDownloader"  style="line-height: 14px;"></span>
      <a  id="downloaderSettingsPrompt" href="javascript:" onclick="document.
          getElementById('downloaderContainer').style.display='block'"></a></div>
       </div>
  <div id="contextMenuItem"><label><input type="checkbox" id="checkboxContextMenu">
    <span id="disableMenu"></span></label>
  </div>
  <div id="downloaderSettingTitle">
   <table><tr>
   <td style="width: 251px;"> <span id="downloaderSetting" class="downloaderOptionTitle">
   </span></td><td style="width:386px"><div id="tipContainer"></div></td>
       <td> <img id="visibleAddDownloaderPanel"  src="images/down.png"
         style="float: right;margin-right: 5px;cursor: pointer;"></td></tr> 
   </table>  </div>  
   <h4 id="linuxTitleLine" style="margin-bottom: 34px;"></h4>
  <div id="downloaderContainer" style="display: none;">
  <div style="margin-bottom: 30px;background-color: #f6fbff ;
      border:1px #ecf6fe solid;height: 98px;">
    <div style="padding: 23px 0 0 20px;">
    <span  id="downloaderSettings" style="line-height: 14px; font-size: 12px;"></span>
    </div>
       </div>
    <div class="downloaderItem">
      <table>
        <tr>
          <th class="th0"><div id="downloaderIcon"></div></th>
          <th class="th1"><div id="downloaderName"></div></th>
          <th class="th2"><div  id="downloaderParameter"></div></th>
          <th class="th3" style="border: 0;"><div></div></th>
        </tr>
      </table>
    </div>
    <div class="downloaderItemContainer" id='downloaderContainerItem'>
      <div>
        <table id="downloaderlist"></table>
      </div>
      <div>
        <table>
          <tr>
            <td class="th0"><img id="settingImg" class="itemImg"
                src="images/icon-nomal.png"></td>
            <td class="th1"><input id="settingName" class="itemName"
                type="text" ></td>
            <td class="th2"><input id="settingParameter" class="itemParameter"
                type="text" ></td>
            <td class="th3">
              <div class="btnDiv">
                <button  id="addDownloader"></button>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div>
    <div id="addURLDialog" class="addURL-Dialog">
      <div class="body">
        <div style="padding:20px">
          <div id="urlAddress"></div>
          <input type="text" id="iconURL" style="padding-left: 6px;">
        </div>
      </div>
      <div class="bottom"><div class="btnDiv">       
        <button  id="addURLOkBtn"></button>
        <button  id="addURLCancelBtn"></button>
      </div></div>
    </div> 
  </div>
  <h4 id="bottomLine"></h4>
   <div id="closeBtn" style="margin: 14px 0 30px 0;">
      <button  id="saveAndClose"  onclick="saveAndClose()"></button>
    </div>
    <div style="height: 50px;" id="bottomDiv"></div>
</div>
<div id="footer" style="margin: 30px 0 0 0;">&copy;2011 Google</div>
<script>
  function $(id) {
    return document.getElementById(id);
  }

  var defaultDownloader =
      localStorage['defaultDownloader'] || 'chrome_downloader';
  var checkboxContextMenu = $('checkboxContextMenu');
  var bg = chrome.extension.getBackgroundPage();
  var downloaderManager = bg.downloaderManager;

  function init() {
    i18nReplace('pageTitle', 'page_title'); 
    i18nReplace('downloader', 'downloader');
    i18nReplace('disableMenu', 'menu_disable');
    i18nReplace('saveAndClose', 'save_and_close');
    if (linuxoptions.isLinuxPlatform()) {
      linuxoptions.init();
    } else {
      $('selectDefaultDownloaderPrompt').style.display = 'none';
      $('closeBtn').style.margin = '34px 0 0 20px';
      $('bottomDiv').style.height = '0';
    }
    bg.updateDownloadersIfNeeded();
    createDownloaderOption($('downloaderOption'));
    if (bg.useContextMenuAPI) {
      $('contextMenuItem').style.display = 'none';
    } else if (!eval(localStorage['contextMenu'])) {
      checkboxContextMenu.checked = true;
    }
  }

  function createDownloaderOption(element) {
    var enableOptions = bg.enableDownloaders;
    for (var i = 0; i < enableOptions.length; i++) {
      var item = enableOptions[i];
      var imageUrl = '';
      var optionItemId = ''
      if (item.isLinux) {
        imageUrl = item.image;
        optionItemId =item.name + item.command;
      } else {
        imageUrl = chrome.extension.getURL(item.image);
      }
      addDownloaderOption(element, imageUrl, item.name, optionItemId)
    }
  }
  
  function addDownloaderOption(element, imageUrl, name, id) {
      var option = document.createElement('div');
      if (linuxoptions.isLinuxPlatform()) {
        option.id = id;
      }
      var label = document.createElement('label');
      var radio = document.createElement('input');
      radio.type = 'radio';
      radio.name = 'downloader';
      radio.value = name;
      if (defaultDownloader == radio.value) {
        radio.checked = true;
      }
      label.appendChild(radio);
      (function(radio) {
        radio.onchange = function() {
          if (radio.checked) {
            defaultDownloader = radio.value;
          }
        }
      })(radio);
      
      var img = document.createElement('img');
      img.src = imageUrl;
      img.style.height = '30px';
      img.style.weight = '30px';
      label.appendChild(img);
      
      var span = document.createElement('span');
      span.innerText = chrome.i18n.getMessage(name) || name;
      label.appendChild(span);
      option.appendChild(label);
      element.appendChild(option);
  }

  function saveAndClose() {
    localStorage['defaultDownloader'] = defaultDownloader;
    localStorage['contextMenu'] = (checkboxContextMenu.checked ? 'false' : 'true');
    if (linuxoptions.isLinuxPlatform()) {
        linuxoptions.deleteDownLoaderStorage();
        linuxoptions.saveDownloader();
    }
    chrome.tabs.getSelected(null, function(tab) {
      chrome.tabs.remove(tab.id);
    });
  };

  function i18nReplace(id, messageName) {
    return $(id).innerHTML =
      chrome.i18n.getMessage(messageName);
  };

  var linuxoptions = {
    rowCount: 0,
    storageTempArr: [],
    deleteRowTempArray: [],
    modifyTempValue: '',
    init: function() {
      i18nReplace('downloaderSetting', 'downloader_setting');
      i18nReplace('downloaderIcon', 'downloader_icon');
      i18nReplace('downloaderName', 'downloader_name');
      i18nReplace('downloaderParameter', 'downloader_parameter');
      i18nReplace('addDownloader', 'add_downloader');
      i18nReplace('urlAddress', 'url_address');
      i18nReplace('addURLOkBtn', 'add_url_ok_btn');
      i18nReplace('addURLCancelBtn', 'add_url_cancel_btn');
      i18nReplace('downloaderSettings', 'downloader_settings');
      i18nReplace('selectDefaultDownloader', 'select_default_downloader');
      i18nReplace('downloaderSettingsPrompt', 'downloader_settings_prompt');
      linuxoptions.displayLinuxOptionPage();
      linuxoptions.setPromptText();
      linuxoptions.addEventListener();
      linuxoptions.readDownloader();
      linuxoptions.displaySelectDafaultDownloaderPormpt();
    },

    addEventListener: function() {
      $('settingImg').addEventListener('mouseover', function() {
        if (this.src.indexOf('images/icon-nomal.png') != -1) {
        this.src = 'images/icon-over.png';
        }
      }, false);

      $('settingImg').addEventListener('mouseout', function() {
        if (this.src.indexOf('images/icon-over.png') != -1) {
          this.src = 'images/icon-nomal.png';
        }
      }, false);

      $('settingImg').addEventListener('click', function() {
        var addURLDialog = $('addURLDialog');
        addURLDialog.style.display = 'block';
        addURLDialog.style.top =  (document.body.scrollTop +
            (document.documentElement.clientHeight - 200 -
            addURLDialog.offsetHeight) / 2) + 'px';
        addURLDialog.style.left =  (document.body.scrollLeft +
            (document.documentElement.clientWidth -
            addURLDialog.offsetWidth) / 2) + 'px';
      }, false);

      $('addURLOkBtn').addEventListener('click', function() {
        $('settingImg').src = $('iconURL').value;
        $('iconURL').value = '';
        linuxoptions.closeAddURLDialog();
      }, false);

      $('addURLCancelBtn').addEventListener('click', function() {
        linuxoptions.closeAddURLDialog();
      }, false);

      $('visibleAddDownloaderPanel').addEventListener('click', function() {
        var downloaderContainer = $('downloaderContainer');
        if ('none' == downloaderContainer.style.display) {
          downloaderContainer.style.display = 'inline';
          $('bottomLine').style.display = 'block';
          this.src = 'images/up.png';
          $('closeBtn').style.marginRight = '18px';
          $('linuxTitleLine').style.marginBottom = '0';
        } else {
          downloaderContainer.style.display = 'none';
          this.src = 'images/down.png';
          $('bottomLine').style.display = 'none';
          $('closeBtn').style.marginRight = '0';
          $('linuxTitleLine').style.marginBottom = '34px';
        }
      }, false);

      $('addDownloader').addEventListener('click', function() {
        var imgsrc = $('settingImg').src;
        var downloaderName = $('settingName').value;
        var downloaderParameter = $('settingParameter').value;
        var downloaderId = downloaderName + downloaderParameter;
        var isInstallation = linuxoptions.addDownloadertoSettingTable(imgsrc, 
            downloaderName, downloaderParameter);
        if (isInstallation) {
          addDownloaderOption($('downloaderOption'), imgsrc, downloaderName,
              downloaderId);
        }
      }, false);

      $('settingName').addEventListener('focus', function() {
        if (this.value ==  chrome.i18n.getMessage('setting_name')) {
          this.value = '';
          this.style.color = '#000000';
        }
      });

      $('settingName').addEventListener('blur', function() {
        if (this.value == '') {
          this.value = chrome.i18n.getMessage('setting_name');        
          this.style.cssText='';
          this.style.color =  '#a5a5a5';
        }
      });

      $('settingParameter').addEventListener('focus', function() {
        if (this.value ==  chrome.i18n.getMessage('setting_parameter')) {
          this.value = '';
          this.style.color = '#000000';
        }
      });

      $('settingParameter').addEventListener('blur', function() {
        if (this.value == '') {
          this.value = chrome.i18n.getMessage('setting_parameter');
          this.style.cssText='';
          this.style.color =  '#a5a5a5';
        }
      });

      $('iconURL').addEventListener('focus', function() {
        if (this.value ==  chrome.i18n.getMessage('icon_url')) {
          this.value = '';
          this.style.color = '#000000';
        }
      });

      $('iconURL').addEventListener('blur', function() {
        if (this.value == '') {
          this.value = chrome.i18n.getMessage('icon_url');
          this.style.color =  '#a5a5a5';
        }
      });
    },

    setPromptText: function() {
      var settingName = $('settingName');
      var settingParameter = $('settingParameter');
      var iconURL = $('iconURL');
      settingName.value = chrome.i18n.getMessage('setting_name');
      settingName.style.color = '#a5a5a5';
      settingParameter.value = chrome.i18n.getMessage('setting_parameter');
      settingParameter.style.color = '#a5a5a5';
      iconURL.style.color = '#a5a5a5';
      iconURL.value = chrome.i18n.getMessage('icon_url');
    },
    
    displaySelectDafaultDownloaderPormpt: function() {
      var defaultDownloaderProId = ['flashget', 'jdownloader', 'gwget'];
      for (var i = 0; i < defaultDownloaderProId.length; ++i) {
        if (bg.plugin.CheckObject(defaultDownloaderProId[i])) {
          $('selectDefaultDownloaderPrompt').style.display = 'none';
          return;
        }
      }
    },
    
    addDownloadertoSettingTable: function(imgsrc, downloaderName, downloaderParameter) {
      var projId = downloaderParameter.split(' ')[0];
      if (!bg.plugin.CheckObject(projId)) {
        if ('Enter' !== projId) {
          linuxoptions.showTip('tip_failed', 'can_not_add_downloader', '160');
        }
        return false;
      } else if (!linuxoptions.
          checkRepeatDownloader(downloaderName, downloaderParameter, -1)) {
          linuxoptions.showTip('tip_failed', 'repeat_add_downloader', '180');
          return false; 
      } else if (''==projId) {
        return false;
      }
      linuxoptions.insertOneRowInTable(linuxoptions.rowCount, imgsrc,
          downloaderName, downloaderParameter);
      linuxoptions.setRowBackgroundColor();
      linuxoptions.rowCount++;
      linuxoptions.temporaryStorage(imgsrc, downloaderName,
          downloaderParameter);
      linuxoptions.cleanAddedDownloaderSettingData();
      return true;
    },
    
  checkRepeatDownloader: function(name, parameter, rowIndex) {
    var downloaderId = name + parameter;
    var table = $('downloaderlist');
    var rows = table.rows;
    for(var i = 0; i < rows.length; ++i) {
      var checkId = table.rows[i].cells[1].firstChild.value +
          table.rows[i].cells[2].firstChild.value;
      if (downloaderId == checkId && i != rowIndex) {
        return false;
      }
    }
    return true ;
  },
  
    insertOneRowInTable: function(rowCount, imgsrc, name, parameter) {
      var downloaderItem = $('downloaderlist');
      var row = downloaderItem.insertRow(rowCount);
      linuxoptions.insertImageToTheRow(row, imgsrc);
      linuxoptions.insertNameOrLinkToTheRow(row, 1, name);
      linuxoptions.insertNameOrLinkToTheRow(row, 2, parameter);
      linuxoptions.insertOptionsToTheRow(row);
    },
    
    setRowBackgroundColor: function() {
      var table = $('downloaderlist');
      var downloaderContainerItem = $('downloaderContainerItem');
      var rows = table.rows;
      var i = 0;
      for(; i < rows.length; ++i) {
        if ((i + 1) % 2 != 0) {
          rows[i].style.backgroundColor = 'White';
        } else {
          rows[i].style.backgroundColor = '#f6fbff';
        }
      }
      if (i % 2 != 0) {
       downloaderContainerItem.style.backgroundColor ='#f6fbff';      
      } else {
        downloaderContainerItem.style.backgroundColor ='White';
      }
    },

    insertImageToTheRow: function(row, src) {
      var cell = row.insertCell(0);
      cell.className = 'th0';
      var img = document.createElement('img');
      img.className = 'itemImg';
      img.src = src;
      cell.appendChild(img);
    },

    insertNameOrLinkToTheRow: function(row, cellCount, value) {
      var cell = row.insertCell(cellCount);
      cell.className = 'th' + cellCount;
      var input = document.createElement('input');
      input.onblur = linuxoptions.saveModification;
      input .onfocus= linuxoptions.setOnfocusCss;
      input.onmouseover = linuxoptions.setMouseOverCss;
      input.onmouseout = linuxoptions.setMouseOutCss;
      input.className = cellCount == 1 ? 'itemName' : 'itemParameter';
      input.style.border = '0';
      input.style.background = '0';
      input.value = value;
      cell.appendChild(input);
    },
    
    setMouseOverCss: function(event) {
      var obj = event.target;
      linuxoptions.setInputCss(obj);
    },
    
    setMouseOutCss: function(event) {
      var obj = event.target;
      if (document.activeElement != obj) {
        linuxoptions.removeInputCss(obj);
      }
    },
    
    setOnfocusCss: function(event) {
      var obj = event.target;
      obj.style.cssText='-webkit-box-shadow:0px 0px 10px #c3e5fa;';
      linuxoptions.setInputCss(obj);
      linuxoptions.modifyTempValue = obj.value;
    },
    
    setInputCss: function(obj) {
      obj.style.height = '22px';     
      obj.style.border = '1px solid #c1d1e0';
      obj.style.background = ' -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#edf5f5))';    
    },
    
    removeInputCss: function(obj) {
      obj.style.cssText='';
      obj.style.border = '0';
      obj.style.background = '0';
    },

    insertOptionsToTheRow: function(row) {
      var cell = row.insertCell(3);
      cell.className = 'th3';
      var  aDelete = document.createElement('A');
      aDelete.innerText =  chrome.i18n.getMessage('delete');
      aDelete.href = 'javascript:';
      aDelete.style.paddingLeft = '15px';
      aDelete.onclick = linuxoptions.deleteDownloader;
      cell.appendChild(aDelete);
    },

    saveModification: function(event) {
      var obj = event.target;
      var tr = obj.parentNode.parentNode;
      var rowCount = tr['rowIndex'];
      var imgSrc = tr.getElementsByTagName('img')[0].src;
      var inputArr = tr.getElementsByTagName('input');
      var downloaderName = inputArr[0].value;
      var downloaderParameter = inputArr[1].value;
      var preOptionsId = '';    
      var projId = downloaderParameter.split(' ')[0];
      if ('itemParameter' == obj.className) {
        if (!bg.plugin.CheckObject(projId)) {   
          linuxoptions.showTip('tip_failed', 'can_not_add_downloader', '160');
          linuxoptions.restoreParameterValue(obj);
          return false;
        } else if (''==projId) {
          linuxoptions.restoreParameterValue(obj);
          return false;
        }
      }   
      if (!linuxoptions.
          checkRepeatDownloader(downloaderName, downloaderParameter, rowCount)) {
        linuxoptions.showTip('tip_failed', 'repeat_add_downloader', '180');
        linuxoptions.restoreParameterValue(obj);
        return false;  
      }        
      linuxoptions.removeInputCss(obj);     
      if ('itemName' == obj.className) { 
        preOptionsId =  linuxoptions.modifyTempValue +downloaderParameter;
      } else {
        preOptionsId =  downloaderName + linuxoptions.modifyTempValue;
      }      
      var optionsId = downloaderName +downloaderParameter;
      $(preOptionsId).id = optionsId;
      linuxoptions.modifyTemporaryStorage(
          rowCount, imgSrc, downloaderName, downloaderParameter);
    },
    
    restoreParameterValue: function(obj) {
      obj.value = linuxoptions.modifyTempValue;
      obj.focus();
    },

    deleteDownloader: function(event) {
      var obj = event.target;
      var tr = obj.parentNode.parentNode;
      linuxoptions.deleteOptionDownLoader(tr);
      linuxoptions.deleteTemporaryStorage(tr['rowIndex']);
      var tbody = tr.parentNode;
      tbody.removeChild(tr);
      linuxoptions.rowCount--;
      linuxoptions.setRowBackgroundColor();
    },
    
    deleteOptionDownLoader: function(tr) {
      var imgSrc =  tr.childNodes[0].firstChild.src;
      var name = tr.childNodes[1].firstChild.value;
      var parameter = tr.childNodes[2].firstChild.value;
      var deleteRowArray = [imgSrc, name, parameter];
      linuxoptions.deleteRowTempArray.push(deleteRowArray);
      var id = name + parameter;
      $('downloaderOption').removeChild($(id));      
    },
    
    deleteDownLoaderStorage: function() { 
      if (linuxoptions.deleteRowTempArray.length == 0) {
        return;
      }                   
      for(var j = 0; j < linuxoptions.deleteRowTempArray.length; j++) {
        var newItem = linuxoptions.deleteRowTempArray[j];
        for (var i = 0; i < downloaderManager.menuItems.length; i++) {
          var item = downloaderManager.menuItems[i];
          if (newItem[0] == item.image && newItem[1] == item.name &&
            newItem[2] == item.command) {
            localStorage.removeItem(item.storageName);
            downloaderManager.menuItems.splice(i,1);    
          }       
        }       
      }     
    },

    displayLinuxOptionPage: function() {
      $('downloaderSettingTitle').style.display = 'block';
      $('linuxTitleLine').style.display = 'block';
      $('closeBtn').style.cssFloat = 'right';
    },

    closeAddURLDialog: function() {
      $('addURLDialog').style.display = 'none';
    },

    temporaryStorage: function(imgsrc, name, parameter) {
      var tempArr = [imgsrc, name, parameter];
      linuxoptions.storageTempArr.push(tempArr);
    },

    modifyTemporaryStorage: function(index, imgsrc, name, parameter) {
      var tempArr = [imgsrc, name, parameter];
      linuxoptions.storageTempArr[index] = tempArr;
      for (var i = 0; i < downloaderManager.menuItems.length; i++) {
        var item = downloaderManager.menuItems[i];
        if ( imgsrc == item.image) { 
          if (name == item.name &&
              linuxoptions.modifyTempValue == item.command) {
               item.command = parameter;
          } else if (linuxoptions.modifyTempValue == item.name &&
              parameter == item.command) {
                item.name = name;
          }
        }
      } 
    },

    deleteTemporaryStorage: function(index) {
      linuxoptions.storageTempArr.splice(index, 1);
    },

    saveDownloader: function() {
      var count = 0;
      var newItem = linuxoptions.storageTempArr[count];
      for (var i = 13; i < downloaderManager.menuItems.length; i++) {
        var item = downloaderManager.menuItems[i];
        if (count < linuxoptions.storageTempArr.length &&
          newItem[0] == item.image && newItem[1] == item.name &&
          newItem[2] == item.command) {        
           if (item.storageName &&
              item.storageName != 'downloaderConfigure' + item.name +item.command) {
            localStorage[ 'downloaderConfigure' + item.name +item.command] =
                [item.image, item.name, item.command];
            localStorage.removeItem(item.storageName);
          }       
          count++;
          newItem = linuxoptions.storageTempArr[count];
        }
      }
      for (; count < linuxoptions.storageTempArr.length; count++) {
        var tempArr = linuxoptions.storageTempArr[count];
        var name = 'downloaderConfigure' +  tempArr[1] + tempArr[2];
        localStorage[name] = [tempArr[0], tempArr[1], tempArr[2]];
        downloaderManager.addCustomDownloader(name, tempArr);
      }
    },

    readDownloader: function() {
      var count = 0;
      for (var i = 13; i < downloaderManager.menuItems.length; i++) { 
        var item = downloaderManager.menuItems[i];
        for (var name in localStorage) {
          if (name.indexOf('downloaderConfigure') == 0) {
            if (item.storageName && name == item.storageName) {
              var customArr = localStorage[name].split(',');
              item.image = customArr[0];
              item.name = customArr[1];
              item.command = customArr[2];
            }
          }
        }
        if (item.isLinux && item.isUserAdd) {
          var projId = item.command.split(' ')[0];
          if (bg.plugin.CheckObject(projId)) {   
            linuxoptions.insertOneRowInTable(
                count, item.image, item.name, item.command);
            count++;
            linuxoptions.temporaryStorage(item.image, item.name,
                item.command);
           }
        }
      }
      linuxoptions.rowCount = count;
      linuxoptions.setRowBackgroundColor();
    },

    cleanAddedDownloaderSettingData: function() {
      $('settingImg').src = 'images/icon-nomal.png';
      $('settingName').value = '';
      $('settingParameter').value = '';
    },
    
    showTip: function(className, message, width) {
      if ($('tipTextContainer')) {
        return;
      }
      var tipContainer =  $('tipContainer');
      var div = document.createElement('DIV');
      div.className = className;
      div.style.width = width + 'px';
      div.id = 'tipTextContainer';
      div.innerText = chrome.i18n.getMessage(message);
      tipContainer.appendChild(div);
      div.style.left = (document.body.clientWidth - div.clientWidth) / 2 + 'px';
      window.setTimeout(function() {
        tipContainer.removeChild(div);
      }, 2000);
    },

    isLinuxPlatform: function() {
      return navigator.userAgent.toLowerCase().indexOf('linux') > -1;
    }
  }
</script>
</body>
</html>